<template>
    <div class="order-report">
        <div class="report-table-top-title">
            增值服务管理
        </div>
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div class="report-table-form1-item word samll" style="width: 50px">状态:</div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-select v-model="status" filterable placeholder="请选择" size="small">
                        <el-option
                            v-for="item in options1"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </div>
                <div class="report-table-form1-item word samll" style="width: 40px"></div>
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="showList"
                border
                style="width: 100%"
            >
                <el-table-column prop="serviceCode" label="增值服务编号" width="150"></el-table-column>
                <el-table-column prop="serviceName" label="增值服务名称"></el-table-column>
                <el-table-column prop="marketPrice" label="市场价">
				</el-table-column>
                <el-table-column prop="agentPrice" label="代理商价"></el-table-column>
                <el-table-column prop="relevanceSystem" label="关联系统"></el-table-column>
                <el-table-column prop="serviceDescribe" label="服务描述"></el-table-column>
                <el-table-column prop="serviceState" label="状态">
                    <template slot-scope="scope">
                        <div v-show="scope.row.serviceState===0">启用</div>
                        <div v-show="scope.row.serviceState===1">停用</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="toUpdate(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="修改增值服务" :visible.sync="dialogFormVisible" width="600px">
            <el-form label-position="right">
                <el-form-item label="服务名称" :label-width="formLabelWidth">
                    <el-input v-model="serviceNameEdit" autocomplete="off" placeholder="请填写增值服务名称"></el-input>
                </el-form-item>
                <el-form-item label="市场价" :label-width="formLabelWidth">
                    <el-input v-model="marketPriceEdit" autocomplete="off" placeholder="请填写增值服务市场价"></el-input>
                </el-form-item>
                <el-form-item label="代理商价" :label-width="formLabelWidth">
                    <el-input v-model="agentPriceEdit" autocomplete="off" placeholder="请填写增值服务代理商加"></el-input>
                </el-form-item>
                <el-form-item label="服务描述" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="serviceDescribeEdit"
                        autocomplete="off"
                        placeholder="请填写服务描述"
                    ></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <div class="serviceImg" style="display: flex">
                        <div class="img" style="width: 250px">
                            <img width="100%" height="100%" :src="this.imageUrl">
                        </div>
                        <div class="upload" style="padding-top: 110px; padding-left: 40px">
                            <el-upload
                                ref="upload"
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :multiple="false"
                                :limit="1"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload"
                            >
                                <el-button
                                    size="small"
                                    type="primary"
                                    @click="$refs.upload.clearFiles()"
                                >点击上传</el-button>
                            </el-upload>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-radio v-model="serviceStateEdit" :label="0">启用</el-radio>
                    <el-radio v-model="serviceStateEdit" :label="1">停用</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="okDialog" size="small">确 定</el-button>
            </div>
        </el-dialog>
        <div class="report-table-block">
            <div class="report-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="position"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>
        <div class="page-padding"></div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            totalNum: 0,
            position: 1,
            status: '',
            formLabelWidth: '120px',
            serviceCodeEdit: '',
            serviceNameEdit: '',
            marketPriceEdit: '',
            agentPriceEdit: '',
            serviceDescribeEdit: '',
            serviceStateEdit: 0,
            serviceImgEdit: '',
            dialogFormVisible: false, // 编辑弹框
            options1: [
                {
                    value: '全部',
                    key: ''
                },
                 {
                    value: '启用',
                    key: 1
                },
                 {
                    value: '停用',
                    key: 2
                }
            ],
            value1: '',
            searchNo: '',
            imageUrl: '',
            showList: [
                {
                    serviceCode: 'LYJB001',
                    serviceName: '卡台B段',
                    marketPrice: '100.00',
                    agentPrice: '90.00',
                    relevanceSystem: '娱加',
                    serviceDescribe: '卡台B段卡台B段',
                    serviceImg: 'static/pic/list.jpg',
                    serviceState: 0
                }
            ]
        }
    },
    mounted () {
    },
    created () {
        // this.getPage()
    },
    watch: {
        value1 () {
            this.position = 1
            // this.getPage()
        },
        position () {
            // this.getPage()
        },
        dialogFormVisible () {
            if (this.dialogFormVisible) {
            } else {
                this.serviceNameEdit = ''
                this.marketPriceEdit = ''
                this.agentPriceEdit = ''
                this.serviceDescribeEdit = ''
                this.serviceStateEdit = 0
                this.serviceImgEdit = ''
            }
        }
    },
    components: {
    },
    props: {
        underLine: null
    },
    computed: {
    },
    methods: {
        handleAvatarSuccess (res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload (file) {
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
		        this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        update (e) {
            let file = e.target.files[0]
            let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
            let fileName = ''
            if (supportedTypes.indexOf(file.type) === 0) {
                fileName = '.jpg'
            }
            if (supportedTypes.indexOf(file.type) === 1) {
                fileName = '.jpeg'
            }
            if (supportedTypes.indexOf(file.type) === 2) {
                fileName = '.png'
            }
            if (supportedTypes.indexOf(file.type) === 3) {
                fileName = '.gif'
            }
            if (file.size > 1024 * 1024 * 5) {
                alert(this.$l().over_5_m)
                return
            }
            if (file && supportedTypes.indexOf(file.type) >= 0) {
                let formData = new FormData()
                let name = 'pic' + fileName
                formData.append('file', file, name)
                this.$http
                    .post(
                        this.$store.state.IP +
                        '/system/company/uploadFiles?type=2',
                        formData,
                        {
                            emulateJSON: false,
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                    )
                    .then(
                        response => {
                            console.log(
                                '-------------------------------------------'
                            )
                            console.log('上传素材图片开始')
                            response = response.body
                            console.log(response)
                            if (response.ret === '0') {
                                console.log('ok')
                                console.log(response.data)
                                this.imageUrl = window.URL.createObjectURL(file) // 获取预览图
                                this.$store.dispatch(
                                    'setAvatar',
                                    window.URL.createObjectURL(file)
                                )
                            }
                            if (response.ret !== '0') {
                                console.log('返回码不是0')
                            }
                            console.log('上传素材图片结束了')
                            console.log(
                                '******************************************'
                            )
                        },
                        response => {
                            console.log('上传素材图片失败了')
                        }
                    )
            } else {
                alert('文件格式只支持：PNG/GIF/JPEG/JPG')
            }
        },
        okDialog () {
            let message = ''
            if (this.serviceNameEdit === '') {
                message = '请输入服务名称'
            }
            if (this.marketPriceEdit === '') {
                message = '请输入市场价'
            }
            if (this.agentPriceEdit === '') {
                message = '请输入代理商价'
            }
            if (message !== '') {
                this.$message({
                    showClose: true,
                    message: message,
                    type: 'warning'
                })
                return
            }
			this.dialogFormVisible = false
            this.$http.post(this.$store.state.IP + '/skinPackage/saveOrEdit', {
                serviceVode: this.serviceCodeEdit,
                serviceName: this.serviceNameEdit,
                marketPrice: this.marketPriceEdit,
                agentPrice: this.agentPriceEdit,
                serviceDescribe: this.serviceDescribeEdit,
                serviceState: this.serviceStateEdit
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('编辑增值服务信息成功')
                    console.log(response.data)
                    this.getPage()
                    this.$message({
                        showClose: true,
                        message: '编辑成功',
                        type: 'success'
                    })
                }
                if (response.ret !== '0') {
                    console.log('编辑增值服务信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        cancelDialog () {
            this.dialogFormVisible = false
            this.serviceCodeEdit = ''
            this.serviceNameEdit = ''
            this.marketPriceEdit = ''
            this.agentPriceEdit = ''
            this.serviceDescribeEdit = ''
            this.serviceStateEdit = 0
            this.serviceImgEdit = ''
        },
        toUpdate (index, row) {
            this.serviceCodeEdit = row.serviceCode
            this.serviceNameEdit = row.serviceName
            this.marketPriceEdit = row.marketPrice
            this.agentPriceEdit = row.agentPrice
            this.serviceDescribeEdit = row.serviceDescribe
            this.dialogFormVisible = true
            this.serviceStateEdit = row.serviceState
            this.serviceImgEdit = row.serviceImg
        },
        search () {
            this.position = 1
            this.getPage()
        },
        // 换页方法
        handleCurrentChange (val) {
            this.position = val
        },
        getPage () {
            this.$http.post(this.$store.state.IP + '/system/stock/getStockStatistics', {
                data: {
                    agentId: this.value1,
                    page: this.position - 1, // 页数
                    limit: 10 // 一页显示数量
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用增值服务详情成功')
                    console.log(response.data)
                    this.showList = response.data.list
                    this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    console.log('调用增值服务详情失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.order-report
    width: 100%
    background #fff
    min-height calc(100vh - 65px)

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background #f1f0f5

     .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing border-box
        background #fff
        overflow hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height 50px
        background #fff
        box-sizing border-box

        .report-table-block-in
            float: right
            padding-right 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background #f1f0f5
    .page-padding
        width: 100%
        height: 20px
        background #fff
    .serviceImg
        height 150px
    .report-table-total
        width: 100%
        font-size: 16px
        color #409EFF
        padding: 22px
        margin-top 22px
        box-sizing border-box
        background #fff
</style>
